<template>
  <main class="ui-page">
    <div class="main-content-border">
      <transition :name="routerClass">
        <router-view class="main-transition-border ui-page"></router-view>
      </transition>
    </div>
  </main>
</template>

<style lang="less">
  .main-transition-border {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
</style>

<script lang="ts">
  import {VueComponent, Component} from "modules";
  import {State, Mutation, namespace} from "vuex-class";

  const GlobalState = namespace("Global", State);
  const GlobalMutation = namespace("Global", Mutation);
  @Component({
    components: {}
  })
  export default class APP extends VueComponent {
    // 路由状态
    @State("skipState", {namespace: "Router"})
    public routerSkipState: string;

    public get routerClass(): string {
      return `ui-router-${this.routerSkipState.toLowerCase()}`;
    }
  }
</script>
